import React, { useRef, memo, useState } from 'react';
import { Row, Col, Form, Input, Button, MessagePlugin, Select, Textarea } from 'tdesign-react';
import { FormInstanceFunctions, SubmitContext } from 'tdesign-react/es/form/type';
import Style from './SearchForm.module.less';
import './SearchForm.less';
import { SelectInput } from 'tdesign-react';
import { ChevronDownIcon } from 'tdesign-icons-react';

import type { SelectInputProps } from 'tdesign-react';

const { FormItem } = Form;
const INITIAL_DATA = {
  name: '',
  type: '',
  payment: '',
  partyA: '',
  partyB: '',
  signDate: '',
  effectiveDate: '',
  endDate: '',
  remark: '',
  notary: '',
  file: [],
};
const OPTIONS = [
  { label: '地址一', value: 1 },
  { label: '地址二', value: 2 },
  { label: '地址三', value: 3 },
  { label: '地址四', value: 4 },
  { label: '地址五', value: 5 },
  { label: '地址六', value: 6 },
];

export type FormValueType = {
  name?: string;
  status?: string;
  number?: string;
  time?: string;
  type?: string;
};

export type SearchFormProps = {
  onCancel: () => void;
  onSubmit: (values: FormValueType) => Promise<void>;
};

const SearchForm: React.FC<SearchFormProps> = (props) => {
  const formRef = useRef<FormInstanceFunctions>();
  // const selectValue = useState('tdesign-vue');
  const [selectValue, setSelectValue] = useState({ label: '地址一', value: 1 });
  // const selectValue = useState([{ label: 'tdesign-vue', value: 1 }]);

  const [popupVisible, setPopupVisible] = useState(false);

  const onClear = () => {
    setSelectValue({ label: '', value: 0 });
  };

  const onPopupVisibleChange: SelectInputProps['onPopupVisibleChange'] = (val, context) => {
    console.log(context);
    setPopupVisible(val);
  };

  const onOptionClick = (item: { label: string; value: number }) => {
    setSelectValue(item);
    // 选中后立即关闭浮层
    setPopupVisible(false);
  };
  const onSubmit = (e: SubmitContext) => {
    if (e.validateResult === true) {
      MessagePlugin.info('提交成功');
    }
    const queryValue = formRef?.current?.getFieldsValue?.(true);
    console.log('form 数据', queryValue);
  };

  const onReset = () => {
    props.onCancel();
    MessagePlugin.info('重置成功');
  };

  return (
    <div className={Style.listCommonTableQuery}>
      <div className={Style.selectInput}>
        <SelectInput
          value={selectValue}
          popupVisible={popupVisible}
          style={{ width: '600px' }}
          placeholder='输入地址搜索'
          clearable
          allowInput
          popupProps={{ overlayInnerStyle: { padding: '8px 16px 0' } }}
          onPopupVisibleChange={onPopupVisibleChange}
          onClear={onClear}
          panel={
            <ul className='large-options'>
              {OPTIONS.map((item) => (
                <li key={item.value} onClick={() => onOptionClick(item)}>
                  {item.label}
                  {/* <HighlightOption content={item?.name} keyword={value} /> */}
                </li>
              ))}
            </ul>
          }
          suffixIcon={
            <div className='large-select-suffix'>
              <span>搜索</span>
            </div>
          }
        />
      </div>
      <Form ref={formRef} onSubmit={onSubmit} onReset={onReset} labelAlign='top'>
        <Row gutter={[40, 12]}>
          <Col span={3}>
            <FormItem
              className={Style.formItem}
              label='下单时间'
              name='name'
              initialData={INITIAL_DATA.name}
              rules={[{ required: true, message: '合同名称必填', type: 'error' }]}
            >
              <Input placeholder='请输入货物数量' />
            </FormItem>
          </Col>

          <Col span={3}>
            <FormItem
              className={Style.formItem}
              label='订单ID'
              name='name'
              initialData={INITIAL_DATA.name}
              rules={[{}]}
            >
              <Input placeholder='请输入货物质量' />
            </FormItem>
          </Col>
          <Col span={3}>
            <FormItem
              className={Style.formItem}
              label='物流运单号'
              name='name'
              initialData={INITIAL_DATA.name}
              rules={[{}]}
            >
              <Input placeholder='请输入其他备注' />
            </FormItem>
          </Col>
          <Col span={3}>
            <FormItem
              className={Style.formItem}
              label='司机信息'
              name='name'
              initialData={INITIAL_DATA.name}
              rules={[{}]}
            >
              <Input placeholder='请输入其他备注' />
            </FormItem>
          </Col>
        </Row>
        <Row justify='space-between' align='bottom'>
          <Col span={6}>
            <FormItem
              className={Style.formItem}
              label='其他备注'
              name='name'
              initialData={INITIAL_DATA.name}
              rules={[{}]}
            >
              <Textarea placeholder='请输入其他备注' />
            </FormItem>
          </Col>
          <Col flex='160px'>
            <Button theme='primary' type='submit' style={{ margin: '0px 20px' }}>
              查询
            </Button>
            <Button type='reset' variant='base' theme='default'>
              重置
            </Button>
          </Col>
        </Row>
      </Form>
    </div>
  );
};

export default memo(SearchForm);
